<template>
    <div id='cust_info'>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item >首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>黑名单</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="header-top">
                <div class="header-item">
                  <div class="header-item-left mr24">姓名:</div>
                  <div class="header-item-right">
                      <el-input v-model="custName" placeholder="请输入姓名" clearable></el-input>
                  </div>
                </div>
                <div class="header-item">
                    <div class="header-item-left">手机号:</div>
                    <div class="header-item-right">
                        <el-input v-model="custTell" placeholder="请输入手机号" clearable></el-input>
                    </div>
                </div>
                <div class="header-button mr24">
                  <el-button type="primary" @click="search">搜索</el-button>
                </div>
                <div class="header-button">
                  <el-button type="plain"  @click="clearFn">取消</el-button>
                </div>
            </div>
          </el-card>
          <el-card class="box-card box-card1">
              <div class="header-button">
                  <el-button type="plain" @click="refresh">刷新<i class="el-icon-refresh el-icon--right"></i></el-button>
              </div>
              <div class="header-button-right">
                  <el-button type="plain" class="btn-left" :loading="isdonwload" @click="donwload">下载黑名单<i class="el-icon-download el-icon--right"></i></el-button>
                  <el-upload
      				      style="display: inline;"
      				      ref="fileupload"
                    :action="updataUrl"
      				      :show-file-list="false"
      				      :http-request="upLoadChange" 
      				      :before-upload="beforeUpload">
      				      <el-button  type="plain" :loading="isUploadBlacklist">上传黑名单<i class="el-icon-upload el-icon--right"></i></el-button>
      				    </el-upload>

              </div>
              <el-table
                :data="tableData"
                v-loading="loading"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="真实姓名"
                  :formatter="ccn"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="mobile"
                  align="center"
                  :formatter="ccn"
                  label="手机号">
                </el-table-column>
                <el-table-column
                  prop="createAt"
                  align="center"
                  :formatter="time"
                  label="添加时间">
                </el-table-column>
                <el-table-column
                  align="center"
                  width="168"
                  fixed="right"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button
                      icon="el-icon-delete"
                      @click.native.prevent="deleteBlacklist(scope.row)"
                      type="text"
                      size="mini">
                      黑名单
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-pagination 
                  v-show="tableData.length" 
                  class="pan"  
                  @current-change="handleCurrentChangeone" 
                  :current-page="pageIndex"  
                  layout="total, prev, pager, next, jumper" 
                  :pager-count="5"
                  :total="total" 
                  :background="true">
              </el-pagination>
          </el-card>
    </div>

</template>
<script>
    import  { mapGetters, mapActions }  from 'vuex'
    import imagesView from '../components/ImagesView.vue'
    import { custInfoApi } from '../api/api'
    import { convertRequestURL } from '../utils/utils'
    import moment from 'moment'
    export default {
        components:{
            imagesView,
        },
        data() {
            return {
                custName:"",
                custTell:"",
                tableData: [],
                loading:false,
                lendTimeFrom:"",
                lendTimeTo:"",
                pageIndex:1,
                total:null,
                pageSize:10,
                isdonwload:false,
                updataUrl:"",
                isUploadBlacklist:false,
                removeId:"",
            }
        },
        computed:{
            ...mapGetters([
                'localInfo',
            ]),
        },
        methods:{
            handleCurrentChangeone(val) {
                console.log(`当前页: ${val}`);
                this.pageIndex=val;
                this.ininList()
            },
            search(){
                this.pageIndex=1;
                this.ininList()
            },
            refresh(){
                this.ininList()
            },
            ccn(row, column, cellValue){
                if(!cellValue){
                    return '--'
                }else{
                    return cellValue
                }
            },
            time(row, column, cellValue){
              if(cellValue){
                return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
              }else{
                return '--'
              }
            },
            //删除黑名单
            deleteBlacklist(item){
              this.removeId=item.id
                this.$confirm('此操作将删除黑名单中该条信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                      let msg = {
                          id:this.removeId
                      }
                      custInfoApi.custRemoveBlacklist(msg)
                      .then(result=>{
                          console.log(result)
                          this.ininList()
                      })
                      .catch(error => {
                          console.error(error)
                      })

                  }).catch(() => {
                    //失败函数      
                  });
            },
            //清楚搜索条件
            clearFn(){
                this.custName=""
                this.custTell=""
            },
            //上传excel
            upLoadChange(msg){
                let formData = new FormData(),imgUrl;
                formData.append("excelFile", msg.file);
                this.isUploadBlacklist=true
                $.ajax({
                    type:"post",
                    url: convertRequestURL("cust/upload/blacklist"),
                    data:formData,
                    contentType:false,
                    //取消帮我们格式化数据，是什么就是什么
                    processData:false,
                    //dataType:"json",
                    success: (resp) => {
                        console.log(resp)
                        this.isUploadBlacklist=false
                        this.ininList()
                    },
                    error(){
                        errorRequestHandle('请求上传黑名单列表失败',reject)
                        this.isUploadBlacklist=false
                    }
                })
            },
            //上传之前得函数
            beforeUpload(file){
                console.log(file)
            },
            //初始化函数
            ininList(){
                let msg = {
                  name:this.custName,
                  phone:this.custTell,
                  pageIndex:this.pageIndex,
                  pageSize:this.pageSize,
                }
                this.loading=true
                custInfoApi.custBlackUserList(msg)
                .then(result=>{
                    console.log(result)
                    this.tableData=result.records
                    this.loading=false
                    this.pageIndex=result.pageNum
                    this.total=result.totalCount
                })
                .catch(error => {
                    console.error(error)
                    this.loading=false
                })
            },
            //下载黑名单
            donwload(){
                this.$confirm('此操作将下载黑名单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                      let msg = {
                        name:this.custName,
                        phone:this.custTell,
                        pageIndex:this.pageIndex,
                        pageSize:this.pageSize,
                      }
                      this.isdonwload=true
                      custInfoApi.custExport(msg)
                      .then(result=>{
                          console.log(result)
                          this.isdonwload=false
                          window.location.href=result.downloadUrl
                      })
                      .catch(error => {
                          console.error(error)
                          this.isdonwload=false
                      })

                  }).catch(() => {
                    //失败函数      
                  });
                
            },
        },
        created(){
            this.updataUrl=convertRequestURL('cust/upload/blacklist')
            this.ininList()
        },
    }
</script>
<style>
    #cust_info .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
      font-weight: normal;
    }
    #cust_info .el-card__body{
      padding: 0px 20px 0px 20px;
    }
    #cust_info .el-button{
        line-height: 14px;
        height: 40px;
    }
    #cust_info .el-button+.el-button{
      margin-left: 0;
    }
    #cust_info .el-button [class*=el-icon-]+span{
      margin-left: 2px;
    }
    #cust_info .el-tabs__item{
      font-size: 16px;
    }
    #cust_info .el-table1::before{
      height: 0;
    }
</style>
<style lang="scss" scoped>
    #cust_info{
        font-weight: normal;
        .box-card{
            margin:20px 0 20px 0!important;
            padding-bottom:20px;
        }
        .box-card1{
          padding-bottom: 0;
        }

    }
   #cust_info .el-breadcrumb{
    margin-top: 30px;
        font-size: 16px;
   }
   .header-item{
        margin-right:10px;
        min-width:240px;
        height:40px;
        margin-top:20px;
        float: left;
    }
    .header-item-left,.header-item-right{
        float: left;
    }
    .header-item-right{
        width:194px;
    }
    .header-item-left{
        height:40px;
        line-height: 40px;
        margin-right: 10px;
    }
  .mr24{
    margin-right: 10px;
  }
  .header-top{
    width: 90%;
     height:12px;
   /* min-height: 12px; */
  }
  .header-bo{
    margin-top: 16px;
  }
  .header-button{
    height:40px;
    float: left;
    margin-top: 20px;
  }
  
  .pan{
      margin-top:10px;
  }
  .header-button-right{
  	float: right;
  	margin-top: 20px;
  	height:40px;
  	.btn-left{
  		margin-right:10px;
  	}
  }
</style>
